<template>
    <div>
      <div class="subject" v-for="(question, index) in questions" :key="index">
        <span>{{ question.num1 }}</span>
        <span>+</span>
        <span>{{ question.num2 }}</span>
        <span>=</span>
        <input type="number" v-model="userAnswers[index]" />
        <button @click="submitAnswer(index)">提交</button>
        <!-- <span>{{ results[index] }}</span> -->
      </div>
    </div>
  </template>
  
  <script>
  import Bus from '@/main';
  export default {
    data() {
      return {
        questions: this.generateQuestions(),
        userAnswers: Array(5).fill(null),
        results: Array(5).fill('未完成'),
      };
    },
    methods: {
      generateQuestions() {
        const questions = [];
        for (let i = 0; i < 5; i++) {
          const num1 = Math.floor(Math.random() * 10);
          const num2 = Math.floor(Math.random() * 10);
          questions.push({ num1, num2, answer: num1 + num2 });
        }
        return questions;
      },
      submitAnswer(index) {
        const userAnswer = parseInt(this.userAnswers[index]);
        const correctAnswer = this.questions[index].answer;
  
        if (userAnswer === correctAnswer) {
          this.results[index] = '回答正确';
          alert(this.results)
        } else {
          this.results[index] = '回答错误';
        }
  
        // 发送结果到事件总线
        Bus.$emit('result-updated', this.results);
      },
    },
    watch: {
    }
  };
  </script>
  
  <style scoped>
  .subject {
    margin: 5px;
    padding: 5px;
    font-size: 20px;
  }
  
  .subject span {
    display: inline-block;
    text-align: center;
    width: 20px;
  }
  
  .subject input {
    width: 50px;
    height: 20px;
  }
  </style>